<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册 语雀</title>
        <style type="text/css">
            body{
                background-color: #fcf8f9;
            }
            .outer{
                width: 400px;
                height: 580px;
                background-color: white;
                margin: 80px auto;
                border: 1px solid #e9e9e9;
                border-radius: 4px;
            }
            .logo{
                width: 320px;
                height: 84px;
                margin: 40px 40px 0 40px;
            }
            .picture{
                width: 64px;
                height: 64px;
                margin:0 128px;
            }
            .content{
                width: 320px;
                height: 438px;
                margin: 0 40px;
            }
            .slogon{
                width: 320px;
                height: 72.8px;
            }
            .title{
                width: 320px;
                height: 38.4px;
                font-size: 32px;
                color: #262626;
                text-align: center;
            }
            .subtitle{
                width: 320px;
                height: 26.4px;
                color: #595959;
                margin-top: 8px;
                font-size: 18px;
                text-align: center;
            }
            .register{
                width: 320px;
                height: 195px;
                margin-top: 30px;
            }
            .register-form{
                width: 320px;
                height: 166px;
            }
            .telephone{
                width: 320px;
                height: 45px;
            }
            .telephone-left{
                width: 86px;
                height: 38px;
                float: left;
                border-radius: 4px 0  0 4px;
                border: 1px solid #d9d9d9;
                cursor: pointer;
                transition: all 0.3s;
            }
            .telephone-left:hover{
                border-color: #47c479;
            }
            .telephone-left span{
                display: block;
                margin-left: 10px;
                margin-top: 9px;
            }
            .telephone-right{
                width:230px ;
                height: 38px;
                float: right;
                border-radius: 0 4px 4px 0;
                border: 1px solid #d9d9d9;
                transition: all 0.3s;
            }
            .telephone-right:focus{
                border-color: #47c479;
                box-shadow: 0 0 0 2px rgba(37,184,100,.2);
            }
            .telephone-right:hover{
                border-color: #47c479;
            }
            .telephone-right input{
                width: 200px;
                height: 16px;
                margin: 12px 11px;
                font-size: 16px;
                border: none;
                outline: none;
            }
            .code{
                width: 320px;
                height: 56px;
                margin-top: 20px;
            }
            .code-left{
                width: 188px;
                height: 38px;
                float: left;
                border: 1px solid #d9d9d9;
                border-radius:4px;
            }
            .code-left input{
                width: 150px;
                height: 16px;
                margin: 12px 11px;
                font-size: 16px;
                border: none;
                outline: none;
            }
            .code-right{
                float: right;
            }
            .code-right button{
                width: 124px;
                height: 40px;
                border: 1px solid #d9d9d9;
                border-radius:4px;
                background-color: white;
                cursor: pointer;
            }
            .quickRegister{
                width: 320px;
                height: 40px;
                margin-bottom:0 ;
            }
            .quickRegister button{
                width: 320px;
                height: 40px;
                color: #fff;
                font-size: 16px;
                border: 1px solid #25b864;
                border-radius:4px;
                background-color: #25b864;
                cursor: pointer;
            }
            .protocol{
                width: 320px;
                height: 20.8px;
                margin-top: 10px;
                text-align: center;
            }
            .protocol span{
                font-size: 14px;
                color: #8c8c8c;
            }
            .protocol a{
                text-decoration: none;
                color: #096dd9;
                transition: color .3s;
            }
            .protocol a:hover{
                color: #149ad9;
            }
            .login-logo{
                width: 295px;
                height: 40px;
                margin: 50px 12.5px 20px;
            }

            .dingtalk{
                width: 28px;
                height: 29px;
                float: left;
                background-image: url("login-logo.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position:0 -28.7px;
                margin-left: 50px;
            }
            .alipay{
                width: 28px;
                height: 29px;
                float: left;
                background-image: url("login-logo.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position:top;
                margin-left: 25px;
            }
            .wechat{
                width: 28px;
                height: 29px;
                float: left;
                background-image: url("login-logo.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position:0 -59.5px;
                margin-left: 25px;
            }
            .teambition{
                width: 28px;
                height: 29px;
                float: left;
                background-image: url("teambition.svg");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 25px;
            }
            .login-link{
                width: 320px;
                height: 21px;
                margin-top: 26px;
                text-align: center;
            }
            .login-link a{
                font-size: 14px;
                color: #096dd9;
                text-decoration: none;
                transition: all 0.3s;
            }
            .login-link a:hover{
                color: #0caad9;
            }
            .foot{
                display: inline-block;
                width: 1px;
                height: 14px;
                vertical-align: middle;
                margin: 0 8px 3px;
                background-color: #e8e8e8;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="logo">
                <a href="https://www.yuque.com/dashboard">
                    <img class="picture" src="yuque-logo.png">
                </a>
            </div>

            <div class="content">
                <div class="slogon">
                    <div class="title">语雀</div>
                    <div class="subtitle">专业的云端知识库</div>
                </div>
                <div class="register">
                    <form class="register-form">
                        <div class="telephone">
                            <div class="telephone-left">
                               <span>+86</span>
                            </div>
                            <div class="telephone-right">
                                <input type="text" placeholder="手机号">
                            </div>
                        </div>
                        <div class="code">
                            <div class="code-left">
                                <input type="text" placeholder="6位短信验证码">
                            </div>
                            <div class="code-right">
                                <button >获取短信验证码</button>
                            </div>
                        </div>
                        <div class="quickRegister">
                            <button>快速注册</button>
                        </div>
                    </form>
                    <div class="protocol">
                        <span>注册即表明同意<a href="https://www.yuque.com/terms" >《语雀服务协议》</a></span>
                    </div>
                </div>
                <div class="login-logo">
                    <a href="https://www.yuque.com/login?platform=dingtalk">
                        <div class="dingtalk"></div>
                    </a>
                    <a href="https://auth.alipay.com/login/index.htm?goto=https%3A%2F%2Fopenauth.alipay.com%3A443%2Foauth2%2FpublicAppAuthorize.htm%3Fscope%3Dauth_user%26app_id%3D2018060560270750%26redirect_uri%3Dhttps%253A%252F%252Fwww.yuque.com%252Flogin%252Foauth%252Falipay%252Fcallback%26state%3Dbd83a5d1-57cd-4008-93f5-8d1ec6cef626">
                        <div class="alipay"></div>
                    </a>
                    <a href="https://www.yuque.com/login?platform=wechat">
                        <div class="wechat"></div>
                    </a>
                    <a href="https://account.teambition.com/login?app_id=5d5fb6a6a55c09000171d757&appName=%E8%AF%AD%E9%9B%80&enforceLogin=1&next_url=https%3A%2F%2Faccount.teambition.com%2Foauth%2Fauthorize%3Fscope%3Dapp_user%252Cphone%252Cemail%26client_id%3D5d5fb6a6a55c09000171d757%26response_type%3Dcode%26redirect_uri%3Dhttps%253A%252F%252Fwww.yuque.com%252Flogin%252Foauth%252Fteambition%252Fcallback%26state%3Dbd83a5d1-57cd-4008-93f5-8d1ec6cef626">
                        <div class="teambition"></div>
                    </a>
                </div>
                <div class="login-link">
                    <a href="https://www.yuque.com/login?goto=https%3A%2F%2Fwww.yuque.com%2Fdashboard">直接登录</a>
                    <span class="foot"></span>
                    <a href="https://www.yuque.com/yuque/help/sms-issue">遇到问题</a>
                </div>
            </div>
        </div>
    </body>
</html>